<template>
  <div>

    <div class="bg">
      <el-row :gutter="10" style="margin-bottom: 30px">
        <el-col :span="5">
          <el-card style="color: #409EFF">
            <div><i class="el-icon-truck"></i>车位总数:</div>
            <div style="padding: 10px 0;text-align: center;font-weight: bold">
              <el-tag>{{ sum }}</el-tag>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card style="color: #67C23A">
            <div><i class="el-icon-map-location"></i>剩余车位数:</div>
            <div style="padding: 10px 0;text-align: center;font-weight: bold">
              <el-tag type="success">{{ SurplusNum }}</el-tag>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card>
            <div style="color: #F56C6C"><i class="el-icon-star-off"></i>已预定数:</div>
            <div style="padding: 10px 0;text-align: center;font-weight: bold">
              <el-tag type="danger">{{ IsReserve }}</el-tag>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card>
            <div style="color: #E6A23C"><i class="el-icon-phone-outline"></i>可预定数:</div>

            <div style="padding: 10px 0;text-align: center;font-weight: bold">
              <el-tag type="warning">{{ NoReserve }}</el-tag>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card>
            <div style="color: #E6A23C;text-align: center">
              <el-badge :value=this.myCar class="item">
                <el-button size="small" type="success" @click="meCar">我的车位</el-button>
              </el-badge>
            </div>
            <div style="padding-top: 10px;text-align: center">
              <el-badge :value=this.NoReserve class="item">
                <el-button size="small" style="width: 80px" type="primary" @click="Reserve">去预定</el-button>
              </el-badge>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-divider><i class="el-icon-truck"></i></el-divider>

      <el-row>
        <el-col :span="12">
          <div id="main" style="width: 500px;height: 400px"></div>
        </el-col>
        <el-col :span="12">
          <div id="pei" style="width: 500px;height: 400px"></div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="社区车位" :visible.sync="dialogTableVisible">
      <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"
                @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" width="50" fixed></el-table-column>
        <el-table-column prop="numberId" label="车位编号" width="80px">
        </el-table-column>
        <el-table-column prop="area" label="车位区域" width="100px">
        </el-table-column>
        <el-table-column prop="type" label="车位类别" width="100px">
          <template v-slot="{ row }">
            <span v-if="row.type === '1'">普通车位</span>
            <span v-else-if="row.type === '2'">VIP车位</span>
            <span v-else-if="row.type === '3'">豪华车位</span>
            <span v-else>免费车位</span>
          </template>
        </el-table-column>
        <el-table-column prop="place" label="车位位置" width="140px">
        </el-table-column>
        <el-table-column prop="price" label="车位价格(/天)" width="115px">
        </el-table-column>
        <el-table-column prop="note" label="车位备注" width="150px">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120px">
          <template slot-scope="scope">
            <el-button type="primary" @click="updatekehu(scope.row)" v-if="scope.row.status=='0'"><i class="el-icon-phone-outline"></i>预定</el-button>
            <el-button type="primary" @click="deleteReserve(scope.row)" v-if="scope.row.status=='1'"><i class="el-icon-circle-close"></i>取消预定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-dialog>
    <el-dialog title="车位预定" :visible.sync="dialogFormVisible" width="60%" @close="no">
      <el-form :model="form" label-position="left" :inline="true">
        <el-form-item label="车位编号" label-width="100px">
          <el-col :span="16">
            <el-input v-model="form.numberId" autocomplete="off" style="width: 220px" :disabled="true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="车位区域" label-width="100px">
          <el-col :span="16">
            <el-input v-model="form.area" autocomplete="off" style="width: 220px" :disabled="true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="车位类别" label-width="100px">
          <el-col :span="16">
            <!--            <el-input v-model="form.type" autocomplete="off" placeholder="请输入车位类别" style="width: 220px"></el-input>-->
            <el-select v-model="form.type" placeholder="请选择" style="width: 220px" :disabled="true">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="车位位置" label-width="100px">
          <el-col :span="16">
            <el-input v-model="form.place" autocomplete="off" :disabled="true" style="width: 220px"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="车位价格(元/天)" label-width="130px">
          <el-col :span="16">
            <el-input v-model="form.price" autocomplete="off" :disabled="true" style="width: 220px;margin-left: -30px"
                      type="number"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="车位备注" label-width="100px">
          <el-col :span="16">
            <el-input v-model="form.note" autocomplete="off" :disabled="true" style="width: 220px" type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="起止时间" label-width="100px" required>
          <el-date-picker
              v-model="form.startEndDto"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @input="onChange(form.startEndDto)"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="停车费用" label-width="100px">
          <el-col :span="16">
            <el-input v-model="form.money" autocomplete="off" :disabled="true" style="width: 120px;margin-left: -30px"
                      type="number"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="no">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import request from "@/utils/request";

export default {
  name: "Carport",
  data() {
    return {
      sum: '0',
      SurplusNum: '0',
      IsReserve: '0',
      NoReserve: '0',
      myCar:'0',
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      total: 0,
      pageNum: 1,
      pageSize: 5,
      type: "",
      date: "",
      form: {
        id: "",
        numberId: "",
        type: "",
        area: "",
        place: "",
        status: "",
        price: "",
        note: "",
        startEndDto: [],
        money: '0'
      },
      headerBg: 'headerBg',
      multipleSelection: [],
      options: [{
        value: '1',
        label: '普通车位'
      }, {
        value: '2',
        label: 'VIP车位'
      }, {
        value: '3',
        label: '豪华车位'
      }, {
        value: '4',
        label: '免费车位'
      }],
    }
  },
  mounted() {//页面渲染后触发
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '社区车位详情',
        subtext: '柱状图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      xAxis: {
        name: '类型',
        type: 'category',
        data: []
      },
      yAxis: {
        name: '已预定人数',
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    };

    this.request.get("echarts/echartsCar").then(res => {
      var data2 = res.data;
      for (let i = 0; i < data2.length; i++) {
        option.xAxis.data.push(data2[i].name);
        option.series[0].data.push(data2[i].value);
      }

      myChart.setOption(option);
    })

    //饼图
    var peioption = {
      title: {
        text: '车位分布',
        subtext: '社区车位分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '车位类型',
          type: 'pie',
          radius: '50%',
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    var peichartDom = document.getElementById('pei');
    var peiChart = echarts.init(peichartDom);
    this.request.get("echarts/car").then(res => {
      peioption.series[0].data = res.data;
      peiChart.setOption(peioption);
    })

    this.request.get("/echarts/carNumber").then(res => {
      this.sum = res.data.sum;
      this.SurplusNum = res.data.surplusNum;
      this.IsReserve = res.data.isReserve;
      this.NoReserve = res.data.noReserve;
      this.myCar = res.data.myCar;
    })


  },
  methods: {
    deleteReserve(row){

      this.$confirm('此操作将取消所预定的车位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.post("carport/deleteCar",row).then(res => {
          if (res.code == "200") {
            this.meCar()
            this.$message({
              type: 'success',
              message: '取消成功!'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '暂不取消'
        });
      });
    },
    meCar() {
      this.dialogTableVisible = true
      request.get("carport/ReservePage", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          id: this.user.id
        }
      }).then(res => {
        if (res.code == "200") {
          this.tableData = res.data.records
          this.total = res.data.total
        }

      })

    },
    save() {
      request.post("carport/updateCar", this.form).then(res => {
        if (res.code == "200") {
          this.dialogFormVisible = false
          this.load()
          this.form = {}
          location.reload();
        }
      })
    },
    no() {
      this.dialogFormVisible = false
      this.form.money = '',
          this.form.startEndDto = []
    },
    onChange(date) {
      request.post("carport/carMoney", this.form).then(res => {
        if (res.code == "200") {
          this.form.money = res.data
        }
      })
    }
    ,
    Reserve() {
      this.dialogTableVisible = true
      this.load()
    },
    load() {
      request.get("carport/NoReservePage", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: this.type
        }
      }).then(res => {
        if (res.code == "200") {
          this.tableData = res.data.records
          this.total = res.data.total
        }

      })
    },
    handleSizeChange(data) {
      this.pageSize = data
      this.load()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(data) {
      this.pageNum = data
      this.load()
    },
    updatekehu(row) {
      this.form = row
      this.dialogFormVisible = true
    },
  }

}
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  /*margin: -20px;*/

  /*background-image: url('../assets/1.jpg');*/
  /*background-image: linear-gradient(to bottom right, #e5d9db, #98a5e7);*/
}
</style>